<template>
  <a-drawer
    :maskClosable="false"
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible">
    <erp-progress-task-change-list-form
      ref="taskChangeListForm"
      @ok="submitCallback"
      :isShowcutContractAmount="true"
      :taskId="taskId"
      :projectNameId="projectNameId"
      @unButtonDisable="unButtonDisable"
      :disabled="disableSubmit"
      @error="errorCallback"
      @dialogClose="dialogClose"
      normal></erp-progress-task-change-list-form>
    <div class="drawer-footer">
      <CommonDrawerFooterButton
        startProcess="erpOmcPrepareProject: startProcess"
        :disableSubmit="disableSubmit"
        :buttonDisable="buttonDisable"
        @handleCancel="handleCancel"
        @handleOk="handleOk"
        @beginProcess="beginProcess"
      ></CommonDrawerFooterButton>
    </div>
  </a-drawer>
</template>
<script>

import ErpProgressTaskChangeListForm from './ErpProgressTaskChangeListForm'
  import CommonDrawerFooterButton from '@/views/components/CommonDrawerFooterButton.vue';
  import { ModalClickMixin } from '@/mixins/ModalClickMixin'
export default {
  name: 'ErpProgressTaskChangeModal',
  components: {
    ErpProgressTaskChangeListForm,
    CommonDrawerFooterButton
  },
  props: {
    taskId: {
      type: String,
      default: '',
      required: false
    },
    type: {
      type: String,
      default: '',
      required: false
    },
    projectNameId: {
      type: String,
      default: '',
      required: false
    }
  },
  mixins: [ModalClickMixin],
  data() {
    return {
      mounted: false,
      submitLoading: false
    }
  },
  mounted() {
    this.mounted = true
  },
  computed: {
    dialogTrigger() {
      return [this.taskId, this.mounted]
    }
  },
  watch: {
    dialogTrigger() {
      if (!this.mounted) {
        return
      }

      if (this.taskId && this.type === 'change') {
        this.buttonDisable = false
        this.visible = true
      }
    }
  },
  methods: {
    dialogClose() {
      this.$emit('close');
      this.visible = false;
    },
    add() {
      this.buttonDisable = false
      this.visible = true
      this.$nextTick(() => {
        this.$refs.taskChangeListForm.add();
      })
    },
    edit(record) {
      this.buttonDisable = false
      this.visible = true
      this.$nextTick(() => {
        this.$refs.taskChangeListForm.edit(record);
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.taskId && this.$bus.$emit('update-id-tab')
    },
    submitCallback(type, record) {
      this.$emit('ok', type, record);
      if (type == 'draft') {
        this.visible = false;
        this.taskId && this.$bus.$emit('update-id-tab')
      }
      this.submitLoading = false
      
    },
    unButtonDisable() {
      this.buttonDisable = false
    },
    handleOk () {
      this.$refs.taskChangeListForm.submitForm('draft');
    },
     // 点击发起流程
    beginProcess () {
      this.buttonDisable = true;
      this.$refs.taskChangeListForm.submitForm('submit');
    },
    errorCallback() {
      this.buttonDisable = false
      this.submitLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 30px;
  margin-bottom: 30px;
  float: right;
}

.drawer-footer {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
  z-index: 9999999
}
</style>
